<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .details_container {
            width: 300px;
            background-color: rgb(214, 231, 187);
            margin-left: 50px;
            /* margin-top: 50px; */
            position: relative
        }

        .magnifier_small {
            width: 450px;
            height: 450px;
            float: left;
            background-color: magenta;
        }

        .magnifier_small>img {
            width: 100%;
            height: 100%;
        }

        .magnifier_big {
            width: 500px;
            height: 500px;
            background-color: mediumturquoise;
            /* display: none; */
            position: absolute;
            top: 0;
            left: 450px;
            overflow: hidden;
        }

        .magnifier_big>img {
            width: 750px;
            height: 750px;
            position: absolute;
            top: 0;
            left: 0;

        }

        .focus {
            width: 300px;
            height: 300px;
            background: #FEDE4F;
            opacity: 0.5;
            position: absolute;
            left: 0;
            top: 0;
            /* display: none;  */
        }
    </style>
</head>

<body>
    <div class="details_container">
        <div class="magnifier_small">
            <div class="focus"></div>
            <img src="../../static/images/04.JPG" alt="" class="small_pic">
        </div>
        <div class="magnifier_big">
            <img src="../../static/images/04.JPG" alt="" class="big_pic">
        </div>
        <h3 class="goods_title"></h3>
        <h4 class="goods_price"></h4>
    </div>
    <script src="../../static/libs/jQuery.js"></script>

    <script>

        var getId = location.hash.split("=")[1] - 0

        $(document).ready(function () {
            $.ajax({
                url: '../../static/data/goods.json'
            }).done(function (data) {
                // console.log(data);
                var str = ''
                data.list.forEach(function (item, index) {

                    // console.log(getId)
                    // console.log((item.id))
                    if (getId === item.id){
                        // console.log(item);   
                        str += `
                                <div class="magnifier_small">
                                    <div class="focus"></div>
                                        <img src="${item.picture}" alt="">
                                    </div>
                                    <div class="magnifier_big">
                                        <img src="${item.picture}" alt="" class="big_pic">
                                    </div>
                                <h3 class="goods_title">${item.title}</h3>
                                <h4 class="goods_price">${item.price}</h4>
                                `
                    }
                    $('.details_container').html(str);
                    
                })
                var m = new Magnifier();
                    m.bindEvent();
            })
        })

        function Magnifier() {
            // 选择程序需要的数据(元素)
            this.small_img_ele = $(".magnifier_small");
            this.big_img = $(".big_pic")
            this.big_img_ele = $(".magnifier_big");
            this.focus_ele = $(".focus");
            // 计算container里面的位置信息; 
            this.container_ele = $(".details_container");

            // this.img_list = [
            //     {
            //         small: "./images/1.jpg",
            //         big: "./images/1.big.jpg"
            //     },
            //     {
            //         small: "./images/2.jpg",
            //         big: "./images/2.big.jpg"
            //     }
            // ]

            this.container_offset = this.container_ele.offset()

            // 获取到焦点框的宽高; 
            // - 小任务 : 通过dom操作获取focus宽高; 
            // - 记得翻阅一下之前将 offsetWidth 和 offsetHeight 属性的注意事项， 就知道为什么取出的值为0了; 
            this.focus_size = {
                width: this.focus_ele.width(),
                height: this.focus_ele.height()
            }
        }
        Magnifier.prototype.bindEvent = function () {
            // 在面向对象程序之中我们不会吧原型方法直接作为事件处理函数; 
            // - 因为这样写的话，原型方法this指向不可控; 
            var mag = this;
            this.small_img_ele.mouseover(function () {
                // 调用显示隐藏功能; 
                mag.toggle("show");
            })
            this.small_img_ele.mouseout(function () {
                // 调用显示隐藏功能; 
                mag.toggle("hide");
            })
            this.small_img_ele.mousemove(function (e = event) {
                // 给程序当前鼠标的位置; 
                mag.focusMove(e.clientX, e.clientY);
                mag.bigImgMove();
            });
        }
        Magnifier.prototype.toggle = function (type) {
            switch (type) {
                case "show":
                    this.big_img_ele.show()
                    this.focus_ele.show();
                    break;
                case "hide":
                    this.big_img_ele.hide();
                    this.focus_ele.hide()
                    break;
            }
        }

        Magnifier.prototype.focusMove = function (x, y) {
            var _left = x - this.container_offset.left - this.focus_size.width / 2;
            // top 是关键字 ，不能直接用做变量名
            var _top = y - this.focus_size.height / 2
            // 边界检测 : 
            // 数值不能小于最小值, 数值也不能大于最大值; 
            // - 判断条件 ， 变量不能小于最小值，如果小于最小值我们就让他变为最小值; 
            // - 变量也不能大于最大值，如果大于最大值，那么我们就让他变为最小值; 
            if (_left < 0) {
                _left = 0;
            }
            if (_top < 0) {
                _top = 0;
            }
            if (_left > 150) {
                _left = 150;
            }
            if (_top > 150) {
                _top = 150;
            }

            this.focus_ele.css({
                left: _left,
                top: _top
            })

            this.prop_left = _left / 150;
            this.prop_top = _top / 150;
        }
        // 跨函数获取数据; 
        Magnifier.prototype.bigImgMove = function () {
            this.big_img.css({
                
                left: -this.prop_left * 250,
                top: -this.prop_top * 250
            })
        }

    </script>
</body>

</html>